import { useRequest } from 'ahooks';
import styles from './index.less';
import SpinBox from '@/components/SpinBox';
import { getFollowList } from '@/services/user/user';
import Avatar from '@/components/Avatar';
import { useState } from 'react';


export const followItem = ({ id, avatar,nickname, updatedTime }) => {
    return <div className={styles.container} onClick={()=>{
       window.open(`/user/${id}`)
    }}>
        <div className={styles.left}>
            <div className={styles.title}><Avatar size={24} userId={id} avatar={avatar} /><span style={{marginLeft:'12px'}}>{nickname}</span></div>
            <div className={styles.desc}>
            关注时间:<span style={{marginLeft:'12px'}}>{updatedTime}</span>
            </div>
        </div>
    </div>
}
export default () => {
    const [followList,setFollowList] = useState([]);
    const {loading} = useRequest(getFollowList,{
        onSuccess:(res)=>{
            const idSet = new Set();
            const filtedArr = res?.reduce((result,item)=>{
                if(!idSet.has(item.id)){
                  idSet.add(item.id)
                  result.push(item)  
                }
                return result
            },[])
            setFollowList(filtedArr)
        }
    })
    return <>
        <SpinBox loading={loading}>
            {
                followList?.map((item) => followItem(item))
            }
        </SpinBox>
    </>
}